<template>
  <div>
    <home-header></home-header>
    <home-swiper :List="swiperList"></home-swiper>
    <home-icons :List="iconList"></home-icons>
    <home-recommend :List="recommendList"></home-recommend>
    <home-weekend :List="weekendList"></home-weekend>
  </div>
</template>

<script>
import HomeHeader from "./components/header.vue";
import HomeSwiper from "./components/swiper.vue";
import HomeIcons from "./components/icons.vue";
import HomeRecommend from "./components/recommend.vue";
import HomeWeekend from "./components/weekend.vue";
import axios from "axios";
import { mapState } from 'vuex'

export default {
  name: "Home",
  components: {
    HomeHeader,
    HomeSwiper,
    HomeIcons,
    HomeRecommend,
    HomeWeekend,
  },
  data () {
    return {
      // city: "",
      lastCity: "",
      swiperList: [],
      iconList: [],
      recommendList: [],
      weekendList: []
    };
  },
  computed: {
    // ...mapState(['city']),
    city () { return this.$store.state.city }
  },
  methods: {
    // 定义发送axios请求的方法
    getHomeInfo () {
      axios.get("/api/index.json?city=" + this.city).then(this.getHomeInfoSucc);
    },
    // 定义接受axios请求结果的方法
    getHomeInfoSucc (res) {
      // console.log(res)，返回的是一个promise对象，我们要的data在它的data属性中
      res = res.data;
      if (res.ret && res.data) {
        // this.city = res.data.city;
        this.swiperList = res.data.swiperList;
        this.iconList = res.data.iconList;
        this.recommendList = res.data.recommendList;
        this.weekendList = res.data.weekendList
      }
    },
  },
  mounted () {
    // 保存离开页面时的城市值
    this.lastCity = this.city
    // 实例挂载完成后进行axios请求
    this.getHomeInfo();
  },
  activated () {
    // keepalive独有的生命狗子
    if (this.lastCity !== this.city) {
      // 如果上次的城市值不等于当前城市值
      this.lastCity == this.city
      // 请求最新城市的数据
      this.getHomeInfo()
    }

  }
};
</script>
// // 漏洞：
// // 11.15之前：flex布局不熟练，预处理器不会，文件引用./../和/的区别，
// 间隔很远怎么写相对路径，或者怎么把路径付给一个标记
// 宽高比：height：0，padding-bottom：50%（当padding取百分之值时，它是谁的百分比）
// scoped的含义和怎么穿透scoped
vue的插件怎么使用
静态文件放在哪，他们能不能被直接访问
// // 11.15：axios，promise，ajxs不熟练，props属性改写在哪？
// // 如果一个标签在axios数据请求完成之前就被解析渲染怎么办？